<template>
  <div>
    <a-table :dataSource="data" :columns="columns" size="middle">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'id'">
          <span>
            <smile-outlined/>
          </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'icon'">
          <Icon :icon="record.icon"></Icon>
        </template>
        <template v-if="column.key === 'state'">
          <a-tag :color="record.state === 1 ? '#108ee9' : '#f50'">
            {{ record.state === 1 ? "启用" : "禁用" }}
          </a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <span>
            <a-button size="small" type="link" @click="showEditor"><EditOutlined/>详情</a-button>
            <a-divider type="vertical"/>
            <a-button size="small" type="link" @click="showEditor"><EditOutlined/>编辑</a-button>
            <a-divider type="vertical"/>
            <a-popconfirm title="确认删除吗？" @confirm="onDelete" ok-text="确认" cancel-text="取消">
                <template #icon>
                  <question-circle-outlined style="color: red"/>
                </template>
                    <a-button type="link" danger size="small"><DeleteOutlined/>删除</a-button>
            </a-popconfirm>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import {SmileOutlined, QuestionCircleOutlined} from "@ant-design/icons-vue";
import {Icon} from "@/config/Icon";
import {DeleteOutlined, EditOutlined} from '@ant-design/icons-vue';
import {defineProps} from "vue";

interface Props {
  data?: Array<any>;
  columns?: Array<any>;
  showEditor?: Function;
  onDelete?: Function;
}

defineProps<Props>();
</script>

<style scoped>
:deep(.ant-btn) {
  font-size: 12px;
}
</style>
